<template>
  <div>
    <div style="padding: 8px">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="60"
        @click="dialogVisible = true"
        >新增</el-button
      >
    </div>
    <el-dialog title="新增考核" :visible.sync="dialogVisible" width="30%">
      <!-- 表单 -->
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="日期" prop="age">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="月考核量" prop="age">
          <el-input v-model.number="form.monthNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="周考核量" prop="age">
          <el-input v-model.number="form.weekNo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
    <div style="margin: 5px 60px">
      <el-table :data="tableData" style="width: 90%">
        <el-table-column label="日期" width="240">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="月考核量" width="240">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="50">{{ scope.row.monthNo }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="周核量" width="240">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="50">{{ scope.row.weekNo }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="60" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="60"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="修改考核" :visible.sync="dialogVisible2" width="30%">
        <!-- 表单 -->
        <el-form
          :model="form2"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="日期" prop="age">
            <el-date-picker
              v-model="form2.date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="月考核量" prop="age">
            <el-input
              v-model.number="form2.monthNo"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="周考核量" prop="age">
            <el-input
              v-model.number="form2.weekNo"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="handleClose2(form2)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
    </div>
  </div>
</template>

<script>
import {
  kpiListAPI,
  kpiDeleteAPI,
  kpiInsertAPI,
  kpiUpdateAPI,
  getUserName,
} from "@/api/2-assessment";
export default {
  data() {
    return {
      dialogVisible: false, //新增弹框
      dialogVisible2: false, //编辑
      form: {
        date: "",
        monthNo: "",
        weekNo: "",
      },
      form2: {},
      total: 0, // 列表总行数
      currentPage: 1,
      pageSize: 10,
      dataList: [],
      tableData: [],
    };
  },
  created() {
    this.kpiList();
  },
  components: {
    Pagin: () => import("c/Pagin"),
  },
  methods: {
    //编辑
    handleEdit(index, row) {
      this.dialogVisible2 = true;
      this.form2 = row;
    },
    //删除
    async handleDelete(index, row) {
      const res = await kpiDeleteAPI(row.id);
      console.log(res);
      this.dataList.splice(index, 1);
      this.fetchData(this.currentPage);
      this.total = this.dataList.length;
      this.$message.success("删除成功");
    },
    async handleClose() {
      //关闭弹框
      const res = await kpiInsertAPI({
        date: this.form.date,
        monthNo: this.form.monthNo,
        weekNo: this.form.weekNo,
      });
      console.log(res.code);
      if (res.code == "1") {
        this.dialogVisible = false;
        this.kpiList()
        this.$message.success("添加成功");
      }
    },
    //列表
    async kpiList() {
      const res = await kpiListAPI();
      this.dataList = res.data;
      this.total = this.dataList.length;
      this.fetchData(this.currentPage);
    },
    //分页
    fetchData(count) {
      var list = this.dataList;
      var from = (count - 1) * this.pageSize;
      const to = count * this.pageSize;
      console.log(to);
      this.tableData = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from]);
        }
      }
    },
    //修改关闭
    async handleClose2() {
      const res = await kpiUpdateAPI({
        id: this.form2.id,
        date: this.form2.date,
        monthNo: this.form2.monthNo,
        weekNo: this.form2.weekNo,
      });
      if (res.code == "1") {
        this.$message.success("修改成功");
      }
      this.dialogVisible2 = false;
    },
  },
};
</script>

<style>
</style>
